import { class_esy, isArray, isEmpty, LeftOutlined } from "esy-ui"
import React, { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import { OptionItem, options3 } from "./const"
import MenuContent from "./MenuContent"

function Menu() {
    const { pathname } = useLocation()
    const [menus, setMenus] = useState<OptionItem[]>([])
    const [show, setShow] = useState(true)

    useEffect(() => {
        const isDocs = /\/docs\/.*/.test(pathname)
        const isCom = /\/components\/.*/.test(pathname)
        if (isDocs) {
            setMenus(options3[3].children[0].children)
        } else if (isCom) {
            setMenus(options3[3].children[1].children)
        }
        return () => {
            setMenus([])
        }
    }, [pathname])

    const changeShow = () => {
        setShow(!show)
    }

    if (isArray(menus) && !isEmpty(menus)) {
        return (
            <div className="md:relative select-none show-thumb">
                <div className={class_esy(["hidden md:flex md:rounded-r md:bg-white md:shadow-card md:flex-col md:pt-8 md:pl-3 md:pb-6 md:overflow-y-auto  md:h-[calc(100vh-41px)] md:mt-px md:transition-width md:duration-250", show ? "md:w-60" : "md:w-0 md:opacity-0"])}>
                    <MenuContent list={menus} idx={/\/docs\/.*/.test(pathname) ? 0 : 1} />
                </div>
                <div className={class_esy(["hidden absolute -right-3 top-10 size-6 z-10 rounded-full border border-solid md:flex items-center justify-center bg-white cursor-pointer transition-transform duration-300", show ? "" : "rotate-180 hover:translate-x-1"])} onClick={changeShow}>
                    <LeftOutlined className="text-xs text-text-1" />
                </div>
            </div>
        )
    }

    return null
}

export default Menu
